<template>
	<el-card>
		<!-- 此处slot 调用element UI里的 header样式 -->
		<div class="header" slot="header">
			<div class="search-header">
				<span>线上热门搜索</span>
				<el-dropdown>
					<span><i class="el-icon-more"></i></span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>黄金糕</el-dropdown-item>
						<el-dropdown-item>狮子头</el-dropdown-item>
						<el-dropdown-item>螺蛳粉</el-dropdown-item>
						<el-dropdown-item>双皮奶</el-dropdown-item>
						<el-dropdown-item>蚵仔煎</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<div>
			<el-row :gutter="10">
				<el-col :span="12">
					<LineCharts></LineCharts>
				</el-col>
				<el-col :span="12">
					<LineCharts></LineCharts>
				</el-col>
			</el-row>
			<!-- table表格 -->
			<el-table :data="tableData" style="width: 100%" border>
				<el-table-column label="排名" width="80" type="index">
				</el-table-column>
				<el-table-column label="搜搜关键字" width="180"> </el-table-column>
				<el-table-column label="用户数" sortable> </el-table-column>
				<el-table-column label="周涨幅" sortable> </el-table-column>
			</el-table>
			<!-- 分页器 -->
			<el-pagination layout="prev, pager, next" :total="100" class="pagination"> </el-pagination>
		</div>
	</el-card>
</template>

<script>
	import LineCharts from './LineCharts'
	export default {
		name: 'Search',
		components: {
			LineCharts
		},
		data() {
			return {
				tableData: [{}]
			}
		},
	}
</script>

<style scoped>
	.header {
		padding: 5px 0;
		border-bottom: 1px solid #eee; 
	}

	.search-header {
		display: flex;
		justify-content: space-between;
		/* 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点 */
	}
	
	.pagination{
	  float: right;
	}
</style>
